<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <div style="margin-left: 5vh;">
            <el-button type="primary" @click="add">
              <el-icon>
                <Plus />
              </el-icon>&nbsp;批量同意
            </el-button>
            <el-button type="primary" @click="minus">
              <el-icon>
                <Minus />
              </el-icon>&nbsp;批量驳回
            </el-button>
          </div>

          <el-card style="width: 1200px" shadow="hover">
            <el-table :data="form" style="width: 100%">
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column fixed prop="empId" label="编号" width="80" />
              <el-table-column prop="username" label="姓名" width="120" />
              <el-table-column prop="type" label="休假类型" width="120" />
              <el-table-column prop="days" label="天数" width="120" />
              <el-table-column prop="beginTime" label="开始时间" width="150" />
              <el-table-column prop="endTime" label="结束时间" width="150" />
              <el-table-column prop="reason" label="原因" width="80" />
              <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                  <el-button type="success" @click="addFn1([scope.row.], '已审核')">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;同意
                  </el-button>
                  <el-button type="danger" @click="addFn1([scope.row.id], '未补签')">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;驳回
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
  Refresh, Plus, Minus,

} from '@element-plus/icons-vue'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'
const add = () => {
  alert('添加!');

}
const minus = () => {
  alert('添加!');

}
// do not use same name with ref
// const form = reactive({
//   name: '',
//   region: '',
//   date1: '',
//   date2: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
// })

// const onSubmit = () => {
//   console.log('submit!')
// }


const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import HeadContent from '@/components/HeadContent.vue'

import{ newFunction, type Leave } from '../../model';
import { getLeaveList } from '@/api/leave';
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const form=ref<Leave[]>([])
const approveLeaveFn =async() => {
 const res= await getLeaveList()
 form.value=res.data
 for (let i = 0; i < form.value!.length; i++) {
    //更改日期格式为`${year}-${month}-${day}`，原始日期为字符串
    const beginTime = form.value![i].beginTime
    const endTime = form.value![i].endTime
    newFunction(beginTime)
    newFunction(endTime)
    form.value![i].beginTime = newFunction(beginTime)
    form.value![i].endTime = newFunction(endTime)

  }


}
approveLeaveFn()

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}
</style>
